﻿{% extends "base.html" %}
{% block head %}
{{ super() }}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>翻相册 - 404</title>

<style>
	body {
		font-family: Seravek, 'Myriad Pro', Myriad, 'Open Sans', 'Helvetica Neue', Helvetica, Arial, 'Arial Black', sans-serif;
		color: #FFF;
		padding: 0;
		margin: 0;
		background-color: #111;
		transition: all 1800ms ease;}
    a {
        color: #fff;
        text-decoration: none;
    }
    a:hover {
        border-bottom: 3px solid white;
        }

    #welcome {
        font-size: 40px;
        text-align: center;
        position: absolute;
        left: 37%;
        top: 27%;
        }

    #logo {
        font-size: 25px;
        align: center;
        position: absolute;
        padding: 10px;
        border: 2px solid white;
        top: 50%;
        left: 50%;
    }
    #cry {
        font-size: 100px;
        text-align: center;
        position: relative;
        animation: example 5s infinite;
        }
        

    @keyframes example {
        0%   {left:30%; top:3%;}
        25%  {left:40%; top:3%;}
        50%  {left:30%; top:3%;}
        75%  {left:40%; top:3%;}
        100% {left:30%; top:3%;}
    }
</style>
{% endblock %}

{% block page_content %}
<body style="background-color: #f79d00;">

<p id="welcome">你迷路了...<br>快<a href="{{ url_for('main.index') }}">回家</a>吧</p>
<p id="logo"><a href="/">
    <b>
        <span class="fan">翻</span>
        <span class="xiang">相</span>
        <span class="ce">册</span>
    </b></a></p>
<p id="cry">-_-</p>
</body>

{% endblock %}


{% block scripts %}
{{ super() }}
<script type="text/javascript" src="jquery.min.js"></script>
<script>
	var listOfColors = ['#f79d00', '#8b3fb2', '#4CAF50', '#2089DA', '#DE4D00'];
	var currentColorIndex = 0;
	var moveToNextColor = function () {
		if (currentColorIndex == listOfColors.length - 1) {
			currentColorIndex = 0;
		} else {
			currentColorIndex += 1;
		}
	};
	window.setTimeout(function () {
		document.getElementById('welcome').style.opacity = 1;
		window.setTimeout(function () {
			window.setInterval(function () {
				document.getElementsByTagName('body')[0].style.backgroundColor = listOfColors[currentColorIndex];
				document.getElementsByTagName('a')[0].style.backgroundColor = listOfColors[currentColorIndex];
				moveToNextColor();
			}, 2000);
		}, 800);
	}, 200);
</script>
{% endblock %}
